<template>
  <div class="head">
    <div class="container">
      <div class="row">
        <div class="col-4">
          <zk title="江苏" showloc>
            <div style="width: 300px;">
              上海 上海 上海 上海 上海 上海
              上海 上海 上海 上海 上海 上海
              上海 上海 上海 上海 上海 上海
              上海 上海 上海 上海 上海 上海
            </div>
          </zk>
        </div>
        <div class="col-8">
          <ul class="right-menu">
            <li>京东会员</li>
            <li class="line"></li>
            <li style="padding: 0">
              <zk title="江苏">
                <div style="width: 300px;">
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                  上海 上海 上海 上海 上海 上海
                </div>
              </zk>
            </li>
            <li class="line"></li>
            <li>我的订单</li>
            <li class="line"></li>
            <li>
              <a href>免费注册</a>
            </li>
            <li>你好，请登录</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Zk from '~/components/head/Zk'
export default {
  components: {
    Zk
  }
}
</script>

<style lang="scss">
@import "~/assets/variables.scss";

.head {
  height: 30px;
  line-height: 30px;
  background-color: #eee;
  border-bottom: 1px solid #ddd;
  font-size: $fontSize12;
  color: #999;
  a {
    color: #999;
  }
  .right-menu {
    li {
      float: right;
      padding: 0 10px;
      &.line {
        width: 1px;
        height: 10px;
        background-color: #ccc;
        margin: 10px 5px 0;
        padding: 0;
      }
    }
  }
}
</style>
